<template>
  <div class="login">
    <div class="wraper">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="user_name">
          <el-input v-model="ruleForm.user_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="user_pwd">
          <el-input
            type="password"
            v-model="ruleForm.user_pwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100%"
            type="primary"
            @click="submitForm('ruleForm')"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { userLogin, getUserInfo } from "@/api/user";
import { mapMutations } from "vuex";
import { FilterRoutes } from '@/utils'
import Routes from "@/router/auth";
export default {
  name: "Login",
  data() {
    var validateUserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的用户名!"));
      }
      callback();
    };
    var validatePassWord = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码!"));
      }
      callback();
    };

    var validatePassWord2 = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error("密码校验失败!密码包含大小写字母、数字、特殊符号!"));
      }
      callback();
    };
    return {
      ruleForm: {
        user_name: "",
        user_pwd: "",
      },
      // 匹配规则
      rules: {
        user_name: [{ validator: validateUserName, trigger: "blur" }],
        user_pwd: [
          { validator: validatePassWord, trigger: "blur" },
          { validator: validatePassWord2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapMutations(["setRoutes"]),
    submitForm(formName) {
      //  根据input里面的内容是否为true做判断
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //   1. 调用登录接口
          //   2. 获取当前用户信息
          userLogin(this.ruleForm).then((res) => {
            sessionStorage.setItem("token", res.token);
            //   登录完成调用获取用户信息
            getUserInfo().then((res) => {
              const text = res.data.identity_text;
              sessionStorage.setItem('text', text)
              sessionStorage.setItem('userInfo', JSON.stringify(res.data))
              // 参数  返回值  函数作用
              FilterRoutes(text, Routes)
              
              // 根据用户身份来添加视图
              this.$router.addRoutes(Routes)
              // 后面会在home中使用，存到vuex中
              this.setRoutes({
                list: Routes
              })
              this.$router.push('/home')
            });
          });
          //   userLogin({
          //       user_name: this.ruleForm.userName,
          //       user_pwd: this.ruleForm.passWord,
          //   })
        } else {
          this.$message.error("请输入正确账号密码");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  height: 100%;
  background: #000080;
  position: relative;
}

.wraper {
  width: 400px;
  padding: 40px 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  position: absolute;
  right: 15%;
  top: 25%;
  box-sizing: border-box;
}
</style>